<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getProductNewSignContractAmount } from "@/api/province_jsc.js";
export default {
  mixins: [resize],
  props: {
    listQuery: {
      type: Object,
      default: () => {},
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      list: [
        { name: "课程拍摄与制作服务", value: "5148000" },
        { name: "高校邦学习平台", value: "840000" },
        { name: "精品在线开放课程产品", value: "150000" },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handleClose() {
      this.editDisabled = false;
    },
    getAll() {
      this.getList();
      this.initChart();
    },
    getList() {
         if(this.listQuery.year!='2020'){
        
           
           this.list=[];
            this.initChart();
           return false
         }
      switch (this.listQuery.month) {
        case "0":
          this.list = [
            { name: "课程拍摄与制作服务", value: "5148000" },
            { name: "高校邦学习平台", value: "840000" },
            { name: "精品在线开放课程产品", value: "150000" },
          ];
            this.initChart();
          break;
        case "1":
          this.list = [{ name: "课程拍摄与制作服务", value: "252000" }];
          this.initChart();
          break;
        case "2":
          this.list = [];
          this.initChart();
          break;
        case "3":
          this.list = [];
          this.initChart();
          break;
        case "4":
          this.list = [
            { name: "高校邦学习平台", value: "780000" },
            { name: "课程拍摄与制作服务", value: "695000" },
          ];
          this.initChart();
          break;
        case "5":
          this.list = [
            { name: "精品在线开放课程产品", value: "150000" },
            { name: "课程拍摄与制作服务", value: "226000" },
          ];
          this.initChart();
          break;
        case "6":
          this.list = [{ name: "课程拍摄与制作服务", value: "1554000" }];
          this.initChart();
          break;
        case "7":
          this.list = [
            { name: "高校邦学习平台", value: "60000" },
            { name: "课程拍摄与制作服务", value: "259800" },
          ];
          this.initChart();
          break;
        case "8":
          this.list = [];
          this.initChart();
          break;
        case "9":
          this.list = [{ name: "课程拍摄与制作服务", value: "2062200" }];

          this.initChart();
          break;
        case "10":
          this.list = [{ name: "课程拍摄与制作服务", value: "99000" }];
          this.initChart();
          break;
      }
      // getProductNewSignContractAmount(this.listQuery).then(res=>{
      //  // this.list=res.data.data;
      //    this.list = res.data.data.map(iterator => {
      //     return {
      //       value: iterator.contractAmount,
      //       name: iterator.productTypeName
      //     }
      //   }) ;
      //   console.log(this.list)
      //  this.initChart();
      // })
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      let _self = this;
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "40",
          orient: "vertical",
          top: "20",
          data: [
            "高校邦学习平台",
            "精品在线开放课程产品",
            "课程拍摄与制作服务",
          ],
        },
        color: ["#FF89B0", "#FFCF5A", "#6EF3ED"],
        series: [
          {
            name: "产品销售金额数据",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            // radius: [15, 95],
            center: ["70%", "60%"],
            data: _self.list,
            animationEasing: "cubicInOut",
            animationDuration: 2600,
          },
        ],
      });
    },
  },
};
</script>
